<template>
	<view class="server">
		<view class="article">
			<personVue title="充值缴费" content="缴费系统 全新升级" :url="src"/>
		</view>
		<view class="common">
			<titleVue title="常用服务" />
			<tableVue :data="store.common" />
		</view>
		<view class="wisdom">
			<titleVue title="智慧社区" />
			<tableVue :data="store.wisdom" />
		</view>
	</view>
</template>

<script setup>
import { onMounted ,ref} from 'vue';
import personVue from '../../components/person.vue';
import titleVue from '../../components/title.vue';
import tableVue from '../../components/table.vue';
import { useServerStore } from '../../stores/serverStore.js';
const src=ref("../static/images/home(2).webp")
const store = useServerStore();
onMounted(() => {
	store.getServerCommon();
	store.getServerWisdom();
});
</script>

<style lang="scss">
.server {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 0 30rpx;
	background-color: #fff;
	:deep .article {
		background-color: #e6f1ff;
		border-radius: 20rpx;
		.left {
			color: #009aff;
		}
	}
	.common {
		border: 2rpx solid #f2f2f2;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 30rpx 0;
		:deep .table {
			.item {
				.item_picture {
					border: 2rpx solid #f2f2f2;
				}
			}
		}
	}
	.wisdom {
		border: 2rpx solid #f2f2f2;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		:deep .table {
			.item {
				.item_picture {
					border: 2rpx solid #f2f2f2;
				}
			}
		}
	}
}
</style>
